<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>享送小哥</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        .inp-reset {
            position: relative;
            overflow: hidden;
        }

        .inp-reset2 {
            display: none;
            position: absolute;
            right: 0;
            top: 0;
            background: url(../images/reset.png) center no-repeat;
            background-size: 100% auto;
            width: .8rem;
            height: 100%;
        }
    </style>
</head>

<body class="bg-f">
    <div id="data-loading">
        <div class="loading1"><img src="../images/loading.gif"></div>
    </div>
    <div class="vue">
        <div class="address1" id="address-info">
            <!-- <div>{{address.address}}</div> -->
            <div class="inp-reset"><em onclick="test3(this)" class="inp-reset2"></em><input onfocus="test1(this)" onblur="test2(this)" type="text" placeholder="地址" v-model="address.address"></div>
            <input type="text" placeholder="请补充楼栋号，例：1栋2单元4楼3号" v-model="address.address_detail">
            <div class="addr-inp1">
                <input type="text" placeholder="姓名" v-model="address.name">
            </div>
            <div class="addr-inp2">
                <input type="tel" placeholder="电话" v-model="address.phone">
                <a href="javascript:;" class="addr-phone" @click="openContacts"></a>
            </div>
        </div>

        <div id="map" style="height:200px;background:#fff;"></div>

        <div class="aui-tab" id="addr-tab">
            <div class="aui-tab-item aui-active">附近地址</div>
            <div class="aui-tab-item">历史地址</div>
        </div>
        <div class="tab-ct">
            <div class="tab-ct-item">
                <ul class="aui-list aui-media-list deliv-list deliv-list1">

                    <li class="aui-list-item" v-for="poi in pois" @click="poiConfirmAddress(poi)">
                        <a href="javascript:;">
                            <div class="aui-media-list-item-inner">
                                <div class="aui-list-item-media"></div>
                                <div class="aui-list-item-inner">
                                    <div class="aui-list-item-text">
                                        <div class="aui-list-item-title aui-ellipsis-1">{{poi.name}}</div>
                                    </div>
                                    <div class="deliv-text2 aui-margin-t-5">{{poi.address}}</div>
                                </div>
                            </div>
                        </a>
                    </li>

                </ul>
            </div>

            <div class="tab-ct-item" v-if="isLogin">
                <ul class="aui-list aui-media-list deliv-list deliv-list1">
                    <li class="aui-list-item" v-for="item in myAddress" @click="myAddressConfirmAddress(item)">
                        <a href="javascript:;">
                            <div class="aui-media-list-item-inner">
                                <div class="aui-list-item-media"></div>
                                <div class="aui-list-item-inner">
                                    <div class="aui-list-item-text">
                                        <div class="aui-list-item-title aui-ellipsis-1">{{item.name}} {{item.phone}}</div>
                                    </div>
                                    <div class="deliv-text2 aui-margin-t-5">{{item.province}}{{item.city}}{{item.district}}{{item.address}}{{item.address_detail}}</div>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="tab-ct-item his-record" v-else>
                <div class="his-text">
                    <p>当前还未登录哦~</p>
                    <p>登录后可查看并使用历史记录</p>
                </div>
                <a href="javascript:;" class="aui-btn aui-btn-info aui-btn-outlined aui-btn-sm u-btn2 aui-margin-t-10" onclick="app.toLogin();">去登录</a>
            </div>

        </div>
    </div>

    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/vue.js"></script>
    <script type="text/javascript" src="../script/app.js"></script>
    <script type="text/javascript" src="../script/aui-tab.js"></script>
    <script type="text/javascript" src="../script/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        function test1(self) {
            $(self).siblings('.inp-reset2').fadeIn();
        }

        function test2(self) {
            $(self).siblings('.inp-reset2').fadeOut();
        }

        function test3(self) {
            $(self).fadeOut();
            $(self).siblings("input").val("");
        }

        apiready = function() {
            var addressInfoPos = app.pos('address-info');
            var mapPos = app.pos('map');

            vObj = new Vue({
                el: ".vue",
                data: {
                    addressInputClose: 0,
                    mapIcon: api.pageParam.mapIcon,
                    addressEventType: api.pageParam.addressEventType,
                    address: {
                        name: "",
                        phone: "",
                        province: "",
                        city: "",
                        district: "",
                        address: "定位中",
                        address_detail: "",
                        lng: "",
                        lat: "",
                        address_id: 0
                    },
                    poisCity: {
                        province: '',
                        city: '',
                        district: ''
                    },
                    pois: [],
                    myAddress: [],
                    isLogin: false
                },
                methods: {
                    clearAddressInput: function(e) {
                        console.log(JSON.stringify(e))
                        this.address.address = '';
                    },
                    submitAddress: function() {
                        if (!this.address.lng || !this.address.lat) {
                            app.error("请选择地址！");
                            return;
                        } else if (this.address.address_detail == '') {
                            app.error("请填写详细门牌号！");
                            return;
                        } else if (this.address.name == '') {
                            app.error("请填写姓名！");
                            return;
                        } else if (this.address.phone == '') {
                            app.error("请填写手机号！");
                            return;
                        } else {
                            // console.log(JSON.stringify(this.address));
                            this.sendAddressEvent(this.address);
                        }
                    },
                    sendAddressEvent: function(address) {
                        api.sendEvent({
                            name: 'getAddressValue',
                            extra: {
                                type: vObj.addressEventType,
                                address: address
                            }
                        });
                        api.closeWin();
                    },
                    openContacts: function() {
                        api.openContacts(function(ret, err) {
                            if (ret && ret.status) {
                                vObj.address.name = ret.name;
                                vObj.address.phone = ret.phone.replace(/-/g, '');
                            } else {
                                app.error("取消选择");
                            }
                        });
                    },
                    poiConfirmAddress: function(poi) {
                        this.setAddress(poi);
                    },
                    myAddressConfirmAddress: function(addr) {
                        this.setAddress(addr);
                    },
                    setAddress: function(data) {
                        if (data.id > 0) {
                            vObj.address.address_id = data.id;
                            vObj.address.name = data.name;
                            vObj.address.phone = data.phone;
                            vObj.address.province = data.province;
                            vObj.address.city = data.city;
                            vObj.address.district = data.district;
                            vObj.address.address = data.address;
                            vObj.address.address_detail = data.address_detail;
                            vObj.address.lng = data.lng;
                            vObj.address.lat = data.lat;
                        } else {
                            vObj.address.address_id = 0;
                            vObj.address.province = vObj.poisCity.province;
                            vObj.address.city = vObj.poisCity.city;
                            vObj.address.district = vObj.poisCity.district;
                            vObj.address.address = data.name;
                            vObj.address.lng = data.coord.lon;
                            vObj.address.lat = data.coord.lat;
                        }

                        // console.log(JSON.stringify(vObj.address))
                    },
                    getMyAddress: function() {
                        if ($api.getStorage('is_login') == 1) {
                            app.request.post('Client/address', {
                                type: 'city'
                            }, {}, function(res) {
                                if (res.code == 200) {
                                    vObj.isLogin = true;
                                    vObj.myAddress = res.data;
                                } else {
                                    app.error(res.message);
                                }
                            });
                        } else {
                            vObj.isLogin = false;
                        }
                        app.request.finish(vObj);
                    }
                }
            })

            var addressData = api.pageParam.addressData;
            app.lbs.init();


            vObj.address.address = addressData.address;
            vObj.address.lng = addressData.lon;
            vObj.address.lat = addressData.lat;
            vObj.address.province = addressData.province;
            vObj.address.city = addressData.city;
            vObj.address.district = addressData.district;
            vObj.pois = addressData.poiList;

            vObj.poisCity = {
                province: addressData.province,
                city: addressData.city,
                district: addressData.district
            }

            // console.log(JSON.stringify(vObj.address))


            app.lbs.map.open({
                rect: {
                    x: 0,
                    y: addressInfoPos.h,
                    w: api.winWidth,
                    h: mapPos.h
                },
                center: {
                    lon: addressData.lon,
                    lat: addressData.lat
                },
                zoomLevel: 15,
                showUserLocation: true,
                fixedOn: 'address_content',
                fixed: false
            }, function(ret) {
                if (ret.status) {
                    app.lbs.map.addAnnotations({
                        annotations: [{
                            id: 1,
                            lon: addressData.lon,
                            lat: addressData.lat
                        }],
                        icon: vObj.mapIcon,
                        draggable: false
                    }, function(ret) {

                    });

                    app.lbs.map.addEventListener({
                        name: 'click'
                    }, function(ret) {
                        if (ret.status) {
                            app.lbs.map.setAnnotationCoords({
                                id: 1,
                                lon: ret.lon,
                                lat: ret.lat
                            });
                            app.lbs.getAddress(ret.lon, ret.lat, function(result) {
                                vObj.address.address = result.address;
                                vObj.address.lng = ret.lon;
                                vObj.address.lat = ret.lat;
                                vObj.address.province = result.province;
                                vObj.address.city = result.city;
                                vObj.address.district = result.district;
                                vObj.address.address_id = 0;
                                vObj.pois = result.poiList;

                                // console.log(JSON.stringify(vObj.address))

                                vObj.poisCity = {
                                    province: result.province,
                                    city: result.city,
                                    district: result.district
                                }
                            });
                        }
                    });
                }
            });

            api.addEventListener({
                name: 'loginSuccess'
            }, function(ret, err) {
                vObj.getMyAddress();
            });

            vObj.getMyAddress();


            var tab = new auiTab({
                element: document.getElementById("addr-tab"),
                index: 1,
                repeatClick: false
            }, function(ret) {
                var tabCont = $api.dom(".tab-ct");
                var tabItems = tabCont.children;
                for (var i = 0; i < tabItems.length; i++) {
                    $api.addCls(tabItems[i], 'aui-hide');
                }
                $api.removeCls(tabItems[ret.index - 1], 'aui-hide');
            });
        }
    </script>
</body>

</html>
